<script setup>
import { ref, watch } from 'vue'
import { onUnload, onHide } from '@dcloudio/uni-app';

const props = defineProps({
  isLoadingShow: Boolean,
  timer: Number
})
const emit = defineEmits(['update:isLoadingShow'])
const time = ref(0)
const id = ref(0)
const closeFn = () => {
  emit('update:isLoadingShow', false)
}
// 文300
// 高60
// 图175
// 消100
// 背80
// 抠100
watch(() => props.isLoadingShow, (val) => {
  if (val) {
    id.value = setInterval(() => {
      if (time.value >= 99) return clearInterval(id.value)
      time.value += 1
    }, props.timer)
  } else {
    clearInterval(id.value)
    time.value = 0
  }
}, {
  deep: true
})

const toPage = () => {
  clearInterval(id.value)
  emit('update:isLoadingShow', false)
  uni.navigateTo({ url: '/pages/createdHistory/index' })
}

onUnload(() => {
  emit('update:isLoadingShow', false)
  clearInterval(id.value)
  time.value = 0
})
onHide(() => {
  emit('update:isLoadingShow', false)
  clearInterval(id.value)
  time.value = 0
})
</script>

<template>
  <div class="centered" v-if="isLoadingShow">
    <!-- <div class="centered" v-if="true"> -->
    <div class="close-box">
      <button class="close" @click="closeFn">稍后查看</button>
      <p class="content" @click="toPage">前往创作历史</p>
    </div>
    <div class="blob-1"></div>
    <div class="blob-2"></div>

    <div class="text">
      <p class="title">
        <slot name="title">创作加载{{ time }}%</slot>
      </p>
      <!-- <p class="time">
        <slot name="time">预计30s左右</slot>
      </p> -->
      <p>
        <slot name="content">
          加载完成后，可在创作历史中查看生成记录
        </slot>
      </p>
    </div>
  </div>
</template>

<style lang="less" scoped>
.centered {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.9);
  animation: Fade 1.5s;
  z-index: 1000;

  .close-box {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%);
    color: var(--a-one-text-color);

    .close {
      // width: 257rpx;
      width: 400rpx;
      height: 80rpx;
      z-index: 1001;
      font-size: 28rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      border: 2rpx solid var(--a-one-text-color);
      background-color: transparent;
      color: var(--a-one-text-color);
    }

    .content {
      font-size: 26rpx;
      text-align: center;
      transform: translate(0, 40rpx);
    }
  }



  .text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28rpx;
    color: var(--a-two-text-color);
    width: 100%;
    text-align: center;
    letter-spacing: 1rpx;




    .title {
      font-size: 34rpx;
      letter-spacing: 3rpx;
      font-weight: normal;
      margin-bottom: 50rpx;

    }

    .time {
      margin: 24rpx 0;
    }
  }

}

.blob-1,
.blob-2 {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  background: #fff;
  border-radius: 50%;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blob-1 {
  left: 20%;
  animation: osc-l 2.5s ease infinite;
}

.blob-2 {
  left: 80%;
  animation: osc-r 2.5s ease infinite;
  background: #0ff;
}

@keyframes osc-l {
  0% {
    left: 20%;
  }

  50% {
    left: 50%;
  }

  100% {
    left: 20%;
  }
}

@keyframes osc-r {
  0% {
    left: 80%;
  }

  50% {
    left: 50%;
  }

  100% {
    left: 80%;
  }
}


@keyframes Fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
